<template>
	<view class="ne">
		<view class="index">
			<view>
				VIP1
			</view>
			<view class="index-to">
				<text>68成长值 （充值可获得成长值）</text>
				<text>VIP2</text>
			</view>
			<view style="margin-top: 10rpx;margin-bottom: 10rpx;">
				<view class="progress-box">
				  <progress :percent='jindu' active stroke-width="4"  activeColor='#ce9a51' />
				</view>
			</view>
			<view class="index-to index-lod">
				<text>距离VIP2只差32成长值</text>
				<text @click="recharge">充值</text>
			</view>
		</view>
		<view class="center">
			<view class="huiyuanhui">
				会员特权
			</view>
			<view class="center-last">
				<view class="xre">
					<span class="iconfont icon-chongzhi "></span>
					<view>
						充值9.5折
					</view>
				</view>
				<view class="xre">
					<span class="iconfont icon-shengritequan"></span>
					<view>
						生日礼物
					</view>
				</view>
				<view class="xre">
					<span class="iconfont icon-shenfen"></span>
					<view>
						定制身份牌
					</view>
				</view>
				<view class="xre">
					<span class="iconfont icon-chongzhi1"></span>
					<view>
						充值送金额
					</view>
				</view>
				<view class="xre">
					<span class="iconfont icon-weijifenjichengchangzhihuiyuanrenwushenqingliucheng-06"></span>
					<view>
						定期成长值
					</view>
				</view>
				<view class="xre">
					<span class="iconfont icon-shuye"></span>
					<view>
						免费时长
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'

	   //进度条
	let jindu= ref(68);
	let recharge=()=>{
		// console.log(123);
		uni.navigateTo({url:'/pages/RechargeWallet/RechargeWallet'});
	}
</script>

<style lang="less" scoped>
@import url('@/static/fonts/myfontsd/font_3762078_hb9hpnlnthq/iconfont.css');
	.ne {
		width: 650rpx;
		margin: 0 auto;

	}

	.index {
		width: 100%;
		height: 220rpx;
		background-color: black;
		color: white;
		border-radius: 8px;
		margin-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
	}

	.index>view:nth-child(1) {
		line-height: 60rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.center {
		position: relative;
		width: 100%;
		height: 400rpx;
		background-color: black;
		margin-top: 60rpx;
		color: white;
		border-radius: 8px;
	}

	.index-to {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.index-lod>text:nth-child(2) {
		padding: 2px 10px 3px 10px;
		background-color: bisque;
		border: 1px solid bisque;
		border-radius: 10px;
		background-color: black;
		
		color: rgb(198, 150, 79);
	}

	.huiyuanhui {
		width: 200rpx;
		height: 70rpx;
		position: absolute;
		top: -40rpx;
		left: calc(50% - 100rpx);
		border: 1px solid white;
		color: rgb(198, 150, 79);
		border-radius: 6px;
		line-height: 70rpx;
		text-align: center;
		background: black;
	}

	.xre>span {
		width: 120rpx;
		height: 80rpx;
		display: inline-block;
		font-size:120rpx;
	}
	.xre .iconfont{
		font-size: 80rpx;
	}
	.xre {
		width: 120rpx;
		margin-right: 26rpx;
		margin-left: 26rpx;
		margin-top: 20rpx;
	}

	.center-last {
		text-align: center;
		padding-top: 60rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
		font-size: 22rpx;
	}
</style>
